*{box-sizing:border-box}
html,body{
--border-radius:600px;
--blue:#7992FF;
--darkblue:#1C47FF;
--orange:#FF6600;
--red:#FE1B00;
--green:#F2FFD5;
--black:#202020;
--darkgrey:#3F3F3F;
--gutter:3.125vw 4.5vw;
--background:#F0F0F0;
--lightgreen:#a4ffde;
margin:0;
padding:0;
width:100%;
overflow-x:hidden;
background:var(--background);
color:var(--darkgrey);
font-size:20px;
font-family:'Syne',sans-serif;
font-weight:400;
-webkit-text-size-adjust:100%;
-webkit-font-smoothing:antialiased}
*,*::before,*::after{max-width:100%}

main{margin-top:100px}
h1{font-size:80px;margin:0}
h2{font-size:60px;margin:0}
a{color:var(--black);text-decoration:none}
section{width:100%;display:flex;min-height:80px;margin-bottom:50px}

/* NAV */
nav{position:fixed;top:0;left:0;width:100%;height:100px;z-index:9999;background:var(--background)}
nav ul{display:flex;align-items:center;width:100%;height:100%;margin:0;padding:0}
nav ul li{list-style:none;margin-left:45px}
nav ul li a{font-family:'Doto',sans-serif;font-weight:200;font-variation-settings:"ROND" 100;font-size:30px;display:flex;flex-basis:10vw}
nav ul li a:hover{color:var(--darkblue);padding:10px;background:var(--orange);border-radius:40px}

.line-container{width:100%;height:1px;overflow:hidden}
.fixed-line{position:fixed;top:100px;width:100%;height:2px;overflow:hidden}
.animated-line{width:0;height:2px;background:var(--darkblue);animation:drawLine 2s forwards}
@keyframes drawLine{from{width:0}to{width:100%}}

/* PAGE */
section.corps article .content-row{display:flex;align-items:flex-start;gap:30px;padding-inline:15px}

/* CAROUSEL */
.carousel{position:relative;flex:0 0 40vw;max-width:900px;overflow:hidden;touch-action:pan-y}
.carousel-track{display:flex;transition:transform .7s ease;will-change:transform}
.carousel-track img{flex-shrink:0;width:100%;height:auto;max-height:70vh;object-fit:contain}
.carousel-btn{position:absolute;transform:translateY(-50%);background:rgba(28,71,255,.1);color:var(--darkblue);border:none;border-radius:30%;padding:8px;font-size:20px;cursor:pointer}
.carousel-btn.prev{left:10px;top:30%}
.carousel-btn.next{right:10px;top:60%}

/* CONTENU */
.contenu{
    flex:2;
    display:flex;
    flex-direction:column;
    gap:30px;
    background:var(--darkgrey);
    animation:morph 50s ease-in-out infinite;
    padding:50px 90px;
    margin-bottom: 3px;}
.contenu .text{
    color:var(--green);
    font-family:'Roboto',sans-serif;
    font-weight:200;
    line-height:1.4;
    margin-bottom: 0;
    margin-top: 0;}
.contenu a{color:var(--green)}
.contenu a:hover{color:var(--darkblue)}

/* SHINE */
.shine-text{position:relative;overflow:hidden}
.shine-text::after{content:"";position:absolute;top:0;left:-150%;width:150%;height:100%;background:linear-gradient(120deg,transparent 30%,rgba(28,71,255,.6) 50%,transparent 70%);animation:shine 3s ease forwards}

/* SCROLL TEXT */
.scroll-text{overflow:hidden}
.scroll-track{white-space:nowrap;display:inline-block;animation:scroll-left 120s linear infinite;will-change:transform}
.scroll-track span{font-family:'Roboto',sans-serif;font-size:1.1rem;letter-spacing:.08em;color:var(--darkgrey)}

/* ANIMATIONS */
@keyframes morph{0%{border-radius:25% 0 35% 10%}25%{border-radius:10% 25% 0 35%}50%{border-radius:35% 10% 25% 0}75%{border-radius:0 35% 10% 25%}100%{border-radius:25% 0 35% 10%}}
@keyframes scroll-left{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
@keyframes shine{from{left:-150%}to{left:150%}}

/* SAFARI iOS */
@supports(-webkit-touch-callout:none){
body{overflow-x:hidden}
section.full-screen{min-height:100svh}
}
@supports(height:100dvh){
section.full-screen{min-height:100dvh}
}

/* RESPONSIVE */
@media(max-width:768px){
html,body{font-size:16px}
main{margin-top:80px}
h1{font-size:42px}
h2{font-size:32px}
nav{height:80px}
nav ul{
    justify-content:space-around;
    gap:15px}
nav ul li{margin-left:0}
nav ul li a{font-size:18px;flex-basis:auto}
.fixed-line{top:80px;height:1px}
section{margin-bottom:30px}
section.corps article .content-row{flex-direction:column;gap:25px}
.carousel{flex:none;width:100%}
.carousel-track img{width:100vw;max-height:50vh}
.carousel-btn{font-size:16px;padding:6px}
.contenu{padding:50px;text-align: justify;gap:20px}
.contenu .text{font-size:15px}
.scroll-track span{font-size:.95rem}
}

@media(max-width:480px){
html,body{font-size:14px}
h1{font-size:34px}
h2{font-size:26px}
nav{height:70px}
nav ul li a{font-size:16px}
.fixed-line{top:70px}
.carousel-track img{max-height:45vh}
.contenu{padding:40px;text-align: justify;}
.scroll-track span{font-size:.9rem}
}

@media(hover:none){
nav ul li a:hover{background:none;padding:0}
}